import TextBox from "../components/TextBox";
import LocalizationContext from "../context/localization/LocalizationContext";
import { VerifyPassword } from "./LoadingStatus";
import { FC, useContext, useState } from "react";

interface WrongPasswordProps {
  verifyPasswordFn: VerifyPassword;
}

const WrongPassword: FC<WrongPasswordProps> = ({ verifyPasswordFn }) => {
  const l10n = useContext(LocalizationContext);
  const [password, setPassword] = useState("");

  const submit = (): void => verifyPasswordFn(password);

  return (
    <div className="rpv-core__asking-password-wrapper">
      <div className="rpv-core__asking-password">
        <div className="rpv-core__asking-password-message">
          {l10n.core.wrongPassword.tryAgain}:
        </div>
        <div className="rpv-core__asking-password-body">
          <div className="rpv-core__asking-password-input">
            <TextBox type="password" value={password} onChange={setPassword} />
          </div>
          <button className="rpv-core__asking-password-button" onClick={submit}>
            {l10n.core.wrongPassword.submit}
          </button>
        </div>
      </div>
    </div>
  );
};

export default WrongPassword;
